<template>
  <el-select
    v-model="localValue"
    filterable
    placeholder="select"
    style="width: 240px"
    :multiple="item.dynamicSelect.multiple"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getTable } from "@/api/apiJson";

defineOptions({
  name: "动态选择"
});
const props = defineProps({
  value: {},
  props: {},
  item: {
    type: Object,
    default: () => {
      return {
        dynamicSelect: {
          code: "",
          label: "",
          value: "",
          multiple: false,
          query: {}
        }
      };
    }
  }
});
const emits = defineEmits(["updateValue-event"]);
const options = ref<any[]>([]);

const localValue = ref(props.value);

function handleChange(value: any) {
  emits("updateValue-event", value);
}

onMounted(() => {
  remoteMethod();
});

function remoteMethod() {
  /**
   * 展示名称
   */
  const label = props.item.dynamicSelect.label;
  /**
   * 赋予值
   */
  const value = props.item.dynamicSelect.value;
  /**
   * 表编码
   */
  const code = props.item.dynamicSelect.code;
  getTable(
    code,
    {
      "@column": `${label}:label,${value}:value`,
      ...props.item.dynamicSelect.query
    },
    0,
    0
  ).then((res: any) => {
    options.value = res[`${code}[]`];
  });
}
</script>
